有時會需要將表單序列化存起來或做其他用途,也有時會需要把之前存起來的還原到表單上,不過js/jquery沒有內建的把表單反序列化回去,自行DIY也有些麻煩,網路上有很多大大因應當時專案可用的版本,找了一個比較全面的來使用~~
在下找到這篇Is there an inverse function to jQuery serialize? 來進行修改,這篇已經考慮到input群組/多選了,不過漏掉select的多選,改寫後怕忘記來上面記錄,也分享給有需要的人~~
有任何建議或可以更好的地方歡迎提出一起討論喔~~
表單序列化
$('#myForm').serialize();
還原表單
//使用方式
var serializeString = $('#myForm').serialize(); // 序列化
$('#myForm').deserialize(serializeString); // 還原表單
/**
* 還原序列化到表單
* @author 舜
* @param {string} serializeString 序列化字串
* 2019/11/05 : 修正當 name = xxx[] 會出錯的問題
*/
$.fn.deserialize = function(serializedString) {
var $form = $(this);
if($form.length==0) return;
$form[0].reset();
//serializedString = serializedString.replace(/+/g, '%20');
var formFieldArray = serializedString.split("&");
//Loop over all name-value pairs
$.each(formFieldArray, function(i, pair) {
var nameValue = pair.split("=");
var name = decodeURIComponent(nameValue[0]);
var value = decodeURIComponent(nameValue[1]);
//Find one or more fields
var $field = $form.find('[name="' + name + '"]');
if($field.is("input")){
//Checkboxes and Radio types need to be handled differently
if ($field[0].type == "radio" || $field[0].type == "checkbox") {
var $fieldWithValue = $field.filter('[value="' + value + '"]');
var isFound = ($fieldWithValue.length > 0);
//Special case if the value is not defined; value will be"on"
if (!isFound && value == "on") {
$field.first().prop("checked", true);
} else {
$fieldWithValue.prop("checked", isFound);
}
} else { //input
$field.val(value);
}
}else if($field.is("select")){
// 多選的下拉選單
$field.val($field.val().concat([value]));
} else { // textarea
$field.val(value);
}
});
return this;
}
(2009-08-23)jQuery Plugin - 將欄位轉為JSON及還原
如果每個欄位都有ID的話,可以參考這一篇